"use client";

import { useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";

const teachers = [
  {
    name: "施正文",
    title: "中国政法大学财税法研究中心主任、教授、博士生导师",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749628499885.jpg",
    expertise: ["税收法规", "税务诉讼", "税收政策", "涉税处罚"],
    description:
      "我国著名财税法学家，中国法学会财税法学研究会副会长、中国税务学会学术委员会委员。参与多部涉税法律法规立法起草，主持20多项国家和省部级课题，出版32部专著，发表160余篇学术论文。",
    description1: "简介：施正文，男，我国著名财税法学家，‌中国政法大学财税法研究中心主任、教授，博士生导师。‌ 中国法学会财税法学研究会副会长、中国税务学会学术委员会委员等职务‌。主要研究领域包括财税法、比较税法、经济法、公共财政等。参与了全等大等等多部涉税法律法规的立法起草工作；主持和参与“中国税法通则立法基本问题研究”等国家和省部级课题20多项；参与了国家税务总局、财政部、最高人民检察院检察院等部委涉税法规起草咨询工作。并在中国税务出版社等十余家出版社出版发行《企业所得税法新旧条文变化与解读》等32部专著，在《中国税务》《法学研究》《中国法学》等期刊发表160余篇学术论文‌。",
  },
  {
    name: "伊 专",
    title: "原国家税务总局税务干部学院副院长、一带一路税务学院·北京副院长",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749624439617.jpg",
    expertise: ["税收政策", "税务培训", "征管实务", "风险防范"],
    description:
      "著名税务专家，拥有近40年税务工作经验。参与国家重大税收政策改革和金税工程，从事税务教育培训30余年。擅长案例式、访谈式教学，获得多项荣誉奖章，发表40余篇专业文章。",
    description1: "简介：伊专曾任国家税务总局税务干部学院副院长、一带一路税务学院·北京副院长、中国税务学会理事会理事。曾在世界500强央企工作；曾在税务系统的基层分局、省局和总局的税收执法、行政管理和教育培训等部门工作和任职，曾参与总局重大税收政策改革、智能化升级改造；曾参与金税一期、二期、三期的相关工作；曾组织或参与查办税收执法类和行政管理类案件；有丰富的企业管理、税收征管和风险防范的实战经验，曾在省级以上刊物发表40余篇财会类和税收类论文或调研；从事专、兼职职业教育30余年，曾为税务系统、党政机关、企事业单位、社会团体、高校师生和“一带一路”沿线国家政府官员授课。",
  },
  {
    name: "袁森庚",
    title: "原国家税务总局干部学院教授、著名税务律师",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749624279192.jpg",
    expertise: ["税务诉讼", "税法教学", "行政执法", "刑事辩护"],
    description:
      "长期从事税法教学和科研工作，办理近200件涉税刑事、行政案件，代理4个过亿税务行政诉讼案件。出版《税务行政执法理论与实务》专著，发表20余篇核心期刊论文。",
    description1: "简介：袁森庚，男，我国著名税务律师。原国家税务总局干部学院教授，长期从事税法的教学和科研工作。曾办理过最高人民法院等各级法院审理的全国涉税刑事、行政案件近200件。代理过涉税金额过亿四个典型的税务行政诉讼案件。出版了《税务行政执法理论与实务》专著一部，并在多种中文核心期刊以及省级以上其他刊物发表论文20余篇。",
  },
  {
    name: "蔡 昌",
    title: "中央财经大学财政税务学院教授、博士生导师，中央财经大学税收筹划与法律研究中心主任",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749624499173.jpg",
    expertise: ["税务风控", "税务筹划", "税务会计", "税收法律"],
    description:
      "我国著名税务风控专家、税务筹划专家，中央财经大学税收筹划与法律研究中心主任。国际注册高级会计师（ICSPA），在国内外知名期刊发表论文100余篇，出版专著10部，教材8部。",
    description1: "简介：蔡  昌，男，我国著名税务风控专家/税务筹划专家，中央经大学财政税务学院教授，博士生导师。中央财经大学税收筹划与法律研究中心主任，税务管理系主任，《中国税收与法律智库》编委会主任，国际注册高级会计师（ICSPA）。会计学博士（国内第一位税务会计与税收筹划方向），中国社会科学院财经战略研究院经济学博士后，美国斯坦福大学（Stanford University）、克莱姆森大学（Clemson University）高级访问学者。在《人民日报》《税务研究》《财政研究》等报刊发表论文100余篇，被人大复印资料《财政与税务》《财务与会计导刊》全文转载21篇，《中国会计年鉴》转载1篇，出版专著10部，教材8部。",
  },
  {
    name: "朱 巍",
    title: "中国政法大学传播法研究中心副主任、副教授、法学博士",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749612333043.jpg",
    expertise: ["传播法", "网络监管", "电商法规", "平台治理"],
    description:
      "我国著名传播法学家，多个国家级专家委员会委员。主持中央网信办、市场监管总局等部委重大课题研究，参与最高法院等多部涉网法规政策制定工作，在电商与网络主播监管领域具有深厚研究。",
    description1: "简介：朱巍，我国著名传播法学家。2009年至今，任中国政法大学传播法研究中心的副主任、副教授、法学博士，硕士生导师。兼任中国消费者协会专家委员会委员、中国信通院智能经济与社会研究中心学术委员会委员、首都法学会法律法学高级人才库专家、中国互联网协会分享经济工作委员会专家委员/社会责任建设工作委员会顾问、国家信息中心分享经济工作委员会专家委员、中国互联网电子数据研究院电子数据法律与政策专家组委员、中国广告协会法律咨询委员会常务委员。多次承担主持中央（国家）网信办、国家市场监督管理总局、文旅部、国家广电总局等部委关于电商/网络主播监管方面几十个重大课题研究，均取得较好反馈。参与最高人民法院、市场监督管理总局、文旅部、中央（国家）网信办等涉网十几部法规政策立法论证/制定工作。",
  },
  {
    name: "吴榕",
    title: "资深税务专家，拥有注册税务师、高级会计师/高级财务管理师等多项专业资质",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250709/1752029377907.jpg",
    expertise: ["税务风控", "涉税处罚", "税务会计", "税收政策"],
    description:
      "中国政法大学法学博士，美国加州大学戴维斯分校访问学者。兼任多个法学研究会理事，主要从事民商法学、公司法、电子商务法研究。参与编著多部专著与教材，在清华大学出版社出版多部法学著作。",
    description1:"简介：吴榕，资深税务专家，拥有注册税务师、高级会计师/高级财务管理师、国际税务咨询师等多项专业资质。现任广东省网商协会常务理事、广东省对俄贸易促进会常年财税顾问、海南省企联合规与维权工委副主任。吴榕在财税领域深耕40余年，在行业内颇具影响力。常年开展税务专项培训，成果斐然：面向全国税务机关开展专场培训超 200 场，围绕深化增值税改革政策举办专题讲座 70 余场，同时针对直播行业、互联网金融、跨境电商等新兴行业开展培训 100 余场，培训的税务干部、财务会计、企业负责人等多个行业的学员达达五万多人，以丰富的实践经验和专业知识为各行业发展赋能。吴榕同志担任《网络主播合规管控政策指南》（下册——纳税实务合规篇）副主编。"},
 
{
    name: "韦 犁",
    title: "原国家工商行政管理总局行政学院副院长、国家市场监督管理总局网监司原副司长",
    image: "/weili.jpg",
    expertise: ["市场监管", "电商直播", "平台规则", "监管政策"],
    description:
      "中国服务贸易协会社交电商分会首席专家，曾培训工商（市场监管）干部万余人次，参与制定市场监管各种法律法规。熟悉电商/网络直播平台各种规则，参与网络主播培训30余场次。",
    description1:"简介：韦犁：男，原国家工商行政管理总局行政学院副院长、国家市场监督管理总局网监司原副司长、中国服务贸易协会社交电商分会首席专家。曾培训工商（市场监管）干部万余人次，参与制定市场监管各种法律法规。熟悉电商/网络直播平台各种规则，参与网络主播培训30余场次。",
  },
    {
    name: "朱晓娟",
    title: "中国政法大学民商经济法学院党委副书记、商法研究所副教授",
    image: "/zhuxiaojuan.jpg",
    expertise: ["民商法", "电子商务法", "公司法", "合同法"],
    description:
      "中国政法大学法学博士，美国加州大学戴维斯分校访问学者。兼任多个法学研究会理事，主要从事民商法学、公司法、电子商务法研究。参与编著多部专著与教材，在清华大学出版社出版多部法学著作。",
    description1:"简介：朱晓娟：女，中国政法大学法学博士，美国加州大学戴维斯分校访问学者。现任中国政法大学民商经济法学院党委副书记、商法研究所副教授。兼任中国法学会商法学研究会副秘书长，北京市法学会电子商务法治研究会常务理事，中国廉政法制研究会理事，中国行为法学会企业治理研究会理事，北京市易准律师事务所律师。主要从事民商法学、公司法、合同法、电子商务法、合作社法研究。发表多篇论文和参与编著多部专著与教材：清华大学出版社2006年版的《破产法原理·规则·案例》（合著）、《合同法原理·规则·案例》（合著）、《人身权法原理·规则·案例》（合著）。",
  },
  {
    name: "李炯梅",
    title: "中国特级注册税务师、中国注册税务师协会轮值副会长",
    image: "/lijiongmei.jpg",
    expertise: ["税务风控", "税务筹划", "智能税务", "智能会计"],
    description:
      "我国著名税务风控专家、税务筹划专家，财税智库创始人，中国第一代智能税务机器人（企业版）发明人。多家高校客座教授，具有ACCA国际专业会计师资格。",
      description1:
      "简介：李炯梅，女，我国著名税务风控专家/税务筹划专家、中国特级注册税务师、第四届中国注册税务师协会轮值副会长、中国注册税务师协会执业准则委员会委员、财税智库创始人，我国第一代智能税务机器人（企业版）发明人。中国人民政治协商会议河北省第十二届委员会委员、河北省注册税务师协会副会长、中国管理科学研究院学术委员会研究员、北京大学税法研究中心、中央财经大学税务学院及省内等多家高校兼职客座教授、河北经贸大学税务硕士专业学位研究生社会导师等；澳大利亚公共会计师协会（IPA AU）公共会计师、ACCA国际专业会计师。",
  }
];


export default function TeachersPage() {
  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = 9; // 每页显示8个教师
  const totalPages = Math.ceil(teachers.length / itemsPerPage);

  const nextPage = () => {
    setCurrentPage((prev) => (prev + 1) % totalPages);
  };

  const prevPage = () => {
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
  };


  return (
    <main className="min-h-screen">
      <div className="bg-primary text-white py-20">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl font-bold text-center mb-6">培训师资</h1>
          <p className="text-xl text-center max-w-3xl mx-auto">汇聚行业顶尖专家，打造专业师资团队</p>
        </div>
      </div>

      <section className="py-20">
        <div className="overflow-hidden">
          <div
            className="flex transition-transform duration-500 ease-in-out"
            style={{ transform: `translateX(-${currentPage * 100}%)` }}
          >
            {Array.from({ length: totalPages }).map((_, pageIndex) => (
              // grid grid-cols-2 md:grid-cols-4设置两列，一行显示四个
              <div key={pageIndex} className="w-full flex-shrink-0 grid grid-cols-2 md:grid-cols-3 gap-8">
                {teachers.slice(pageIndex * itemsPerPage, (pageIndex + 1) * itemsPerPage).map((teacher, index) => (
                  <div key={index} className="bg-white rounded-lg shadow-sm overflow-hidden relative group">
                    {/* 图片区域 */}
                    <div className="relative aspect-[5/5]">
                      {/* <Image
                        src={teacher.image || "/placeholder.webp"} // 优先用WebP
                        alt={teacher.name}
                        fill
                        priority={index < 3} // 首屏前3张图优先加载
                        quality={75} // 质量调整（75~85平衡清晰度和体积）
                        className="object-cover"
                        sizes="(max-width: 768px) 50vw, 25vw" // 根据布局调整
                      /> */}
                      <Image
                        src={teacher.image || "/placeholder.webp"}
                        alt={teacher.name}
                        fill
                        className="object-cover"
                      />
                    </div>

                    {/* 悬停时显示的个人信息 */}
                    <div className="absolute inset-0 bg-blue-600 bg-opacity-75 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-start items-start p-4 text-white overflow-y-auto">
                      {/* 调整文字的行高或间距leading-6 */}
                      <p className="text-sm text-left leading-6">{teacher.description1}</p>
                    </div>

                    {/* 默认显示的个人信息 */}
                    <div className="p-6">
                      <h3 className="text-xl font-bold mb-2">{teacher.name}</h3>
                      <p className="text-primary font-medium mb-4">{teacher.title}</p>
                      <div className="mb-4">
                        {/* 每行显示两个 expertise */}
                        <div className="text-center grid grid-cols-2 gap-2">
                          {teacher.expertise.map((item, i) => (
                            <span key={i} className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm text-center">
                              {item}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">师资优势</h2>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              { title: "专业背景", content: "来自知名高校和政府机构" },
              { title: "实战经验", content: "具备丰富的实践经验" },
              { title: "教学能力", content: "擅长理论与实践结合" },
              { title: "研究成果", content: "拥有丰富的研究成果" },
            ].map((item, index) => (
              <div key={index} className="text-center">
                <h3 className="text-xl font-bold mb-4">{item.title}</h3>
                <p className="text-gray-600">{item.content}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}